<template>
    <div class="min-h-screen flex flex-col">
        <!-- 登录注册 -->
        <header class="header bg-white p-4 shadow-md flex justify-between items-center">

            <div class="container flex items-center">
                <div class="links-container"> <!-- 新增的容器 -->
                    <a href="#" class="flex items-center text-gray-600 hover:text-blue-500">
                        <i class="icon-download"></i>
                        <span class="ml-1">下载App</span>
                    </a>
                    <a href="#" class="text-blue-500 font-bold hover:underline">栏目收费说明</a>
                </div>
                <!-- 使用 v-if/v-else 来条件渲染登录/注册按钮或用户信息 -->
                <div v-if="!username" class="lrcs items-center space-x-4"> <!-- Flex 布局让内容一行排列 -->
                    <RouterLink class="btn-login"
                        :to="{ name: 'Login', query: { redirecturl: router.currentRoute.value.fullPath } }">登录
                    </RouterLink>
                    <RouterLink class="btn-register" to='/register'>注册</RouterLink>
                </div>
                <div v-else class="user-info flex items-center space-x-3"> <!-- 用户信息 -->
                    <img :src="avatar" alt="用户头像" class="user-avatar w-8 h-8 rounded-full" />
                    <span>{{ username }}</span>
                    <span class="text-logout" @click="logout">退出</span>
                </div>

            </div>
        </header>

        <!-- Search -->
        <div class="search-header">
            <div class="search-wrapper">
                <RouterLink to="/" class="text-a">丁香医生</RouterLink>
                <input type="text" v-model="searchQuery" placeholder="搜索疾病、医院、药品" class="search-input" />
                <button class="search-button">搜索</button>
            </div>
        </div>

        <!-- Navigation -->
        <nav class="main-nav">
            <router-link v-for="item in navigationItems" :key="item.name" :to="item.link" class="nav-link">
                {{ item.name }}
            </router-link>
        </nav>

        <!-- Breadcrumb Navigation -->
        <div class="breadcrumb-container mb-4">
            <nav class="flex items-center text-sm">
                <router-link to="/" class="text-emerald-500 hover:text-emerald-600">首页</router-link>
                <span class="mx-2 text-gray-400">›</span>
                <router-link to="/disease" class="text-emerald-500 hover:text-emerald-600">查疾病</router-link>
                <span class="mx-2 text-gray-400">›</span>
                <span class="text-gray-700" v-if="treat">{{ treat.name }}</span>
            </nav>


            <!-- Disease Content Section -->
            <div class="disease-content-container" v-if="treat">
                <div class="disease-header">
                    <h2>{{ treat.name }}</h2>
                    <p class="disease-department">就诊科室：{{ treat.department }}</p>

                    <p class="disease-note">{{ treat.remark }}</p>
                </div>
                <h2>疾病介绍</h2>
                <div class="disease-details">
                    <p v-html="treat.description"></p>
                </div>
            </div>

            <!-- Doctor Information Section -->
            <div class="doctors-container">
                <div class="doctors-header">
                    <h2>医生推荐</h2>
                    <div class="find" @click="navigateToDoctors(doctors[0].department_id)">
                        查看更多
                    </div>
                </div>
                <div class="doctors-list">
                    <div v-for="doctor in doctors" :key="doctor.id" class="doctor-card"
                        @click="viewDoctorNewPage(doctor.id)">
                        <!-- 医生图片 -->
                        <div class="doctor-image">
                            <img :src="doctor.avatar" :alt="doctor.name">
                        </div>
                        <!-- 医生信息 -->
                        <div class="doctor-info">
                            <div class="doctor-name-title">
                                <span class="doctor-name">{{ doctor.name }}</span>
                                <span class="doctor-title">{{ doctor.get_title_display }}</span>
                            </div>
                            <div class="doctor-details">
                                <div>{{ doctor.hospital }}</div>
                                <div>{{ doctor.department }}</div>
                            </div>
                            <div class="rating-consult">
                                <div class="doctor-rating">
                                    <span class="rating">{{ doctor.rating }}</span>
                                    <span class="star-icon">★</span>
                                </div>
                                <span class="separator">|</span>
                                <span class="consult-count">{{ doctor.consultation_count }}人问诊</span>
                            </div>
                            <p class="introduction" v-html="doctor.introduction.slice(0, 37) + '...'"></p>
                            <div class="price-action">
                                <span class="price">¥{{ doctor.consultation_price }}/次</span>
                                <button class="consult-btn">立即咨询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 医院 -->
            <div class="hospitals-container">
                <div class="hospitals-header">
                    <h2>推荐科室</h2>
                    <div class="depart" v-if="treat">
                        {{ treat.department }}
                    </div>
                </div>

                <div class="hospitals-list">
                    <div v-for="hospital in hospitals" :key="hospital.id" class="hospital-card"
                        @click="navigateToHospital(hospital.id)">
                        <!-- 左侧医院图片 -->
                        <div class="hospital-image">
                            <img :src="hospital.covers" alt="医院图片" />
                        </div>
                        <!-- 右侧医院信息 -->
                        <div class="hospital-info">
                            <div class="hospital-name">{{ hospital.name }}</div>
                            <div class="hospital-address">{{ hospital.address }}</div>
                            <div class="hospital-level">{{ hospital.get_level_display }}</div>
                        </div>
                    </div>
                </div>
            </div>



        </div>

        <!-- Footer -->
        <footer class="mt-auto">
            <div class="bottom-links">
                <a target="_blank" href="http://www.dxy.cn/pages/copyright.html" rel="nofollow">版权声明</a>
                <a target="_blank" href="https://dxy.com/column/board" rel="nofollow">作者编委</a>
                <a target="_blank" href="https://ask.dxy.com/ama/index" rel="nofollow">丁香医生</a>
                <a href="mailto:doctor@dxy.com" rel="nofollow">投稿邮箱 doctor@dxy.com</a>
                <a target="_blank">客服电话：0571-22931767</a>
            </div>
        </footer>

    </div>






</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import { jwtDecode } from 'jwt-decode';
const router = useRouter();
const route = useRoute();
const username = ref<string | null>(null);
const avatar = ref<string | null>(null);
const treat = ref<string | null>(null);
const doctors = ref<any[]>([]);
const hospitals = ref<any[]>([]);
const departmentId = ref<number>(0);
const searchQuery = ref('');
const navigationItems = [
    { name: '问医生', link: '/sections' },
    { name: '查疾病', link: '/disease' },
    { name: '查药品', link: '/medicine' },
    { name: '查医院', link: '/hospital' },
    { name: '查检查/手术', link: '/examination' },
    { name: '查疫苗', link: '/vaccine' },
    { name: '急救指南', link: '/emergency' },
    { name: '测一测', link: '/test' },
    { name: '科普视频', link: '/videos' }
];


// 登录
const fetchUserInfo = async () => {
    const token = localStorage.getItem('token');
    if (token) {
        try {
            const decodedToken = await jwtDecode(token);

            const redirecturl = router.currentRoute.value.path
            console.log(redirecturl)
            router.push({ name: 'Examination', query: { redirecturl: redirecturl } });

            // 假设 jwtDecode 是异步的
            username.value = decodedToken.username;
            avatar.value = 'http://127.0.0.1:8000/uploads/' + decodedToken.avatar;
            console.log(avatar.value);
        } catch (error) {
            console.error('Error decoding JWT:', error);
        }
    }
}

const logout = () => {
    localStorage.removeItem('token');
    username.value = null;
    avatar.value = null;
};

const fetchTreatDetail = async () => {
    const treatId = route.params.treatId;
    console.log(treatId);
    const response = await axios.get(`http://127.0.0.1:8000/doctor/treatdetail/${route.params.treatId}/`);
    console.log(response);
    treat.value = response.data

    departmentId.value = response.data.department_id;
    const doctorsResponse = await axios.get(`http://127.0.0.1:8000/doctor/doctor/${departmentId.value}/`);
    doctors.value = doctorsResponse.data.slice(0, 4);

    const hospitalResponse = await axios.get(`http://127.0.0.1:8000/doctor/hospital/${departmentId.value}/`);
    hospitals.value = hospitalResponse.data.slice(0, 4);
};



const viewDoctorNewPage = (doctorId: number) => {
    const doctorUrl = `/doctor/${doctorId}`;
    window.open(doctorUrl, '_blank'); // 在新标签页中打开
};

const navigateToDoctors = (departmentId: number) => {
    router.push(`/doctors/${departmentId}`);
};

const navigateToHospital = (hospitalId: number) => {
    router.push(`/hospital/${hospitalId}`);
};


onMounted(() => {
    fetchUserInfo();
    fetchTreatDetail();
});


</script>

<style scoped>
/* 登录注册 */
/* Header Styling */
.header {
    background-color: #ffffff;
    /* White background */
    color: #333333;
    /* Gray text color */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Left Content Links */
.header a {
    text-decoration: none;
    color: #666666;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.header a:hover {
    color: #00b38a;
    /* Match green color on hover */
}

.header a.text-blue-500 {
    color: #00b38a;
    /* Green color for special links */
    font-weight: bold;
    margin-left: 16px;
}

.text-logout {
    margin-left: 16px;
    background-color: transparent;
    /* 透明背景 */
    border: none;
    /* 无边框 */
    color: #666666;
    /* 文本颜色与下载链接一致 */
    padding: 0;
    /* 移除内边距 */
    font-size: 14px;
    font-weight: normal;
    /* 正常字体粗细 */
    cursor: pointer;
    text-decoration: none;
    /* 移除下划线 */
    transition: color 0.3s ease;
    /* 颜色过渡效果 */
}

.text-logout:hover {
    color: #00b38a;
    text-decoration: underline;

}


.container {
    display: flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: 16px;
    margin-right: 350px;

}

/* 可以添加一个包含栏目、下载等链接的容器样式 */
.links-container {
    display: flex;
    align-items: center;
    /* 之间的间隔 */



}

;

/* Right Content Buttons */

.btn-login {
    background-color: transparent;
    /* 透明背景 */
    border: none;
    /* 无边框 */
    color: #666666;
    /* 文本颜色与下载链接一致 */
    padding: 0;
    /* 移除内边距 */
    font-size: 14px;
    font-weight: normal;
    /* 正常字体粗细 */
    cursor: pointer;
    text-decoration: none;
    /* 移除下划线 */
    transition: color 0.3s ease;
    /* 颜色过渡效果 */
}

.btn-register {
    background-color: transparent;
    /* 透明背景 */
    border: none;
    /* 无边框 */
    color: #666666;
    /* 文本颜色与下载链接一致 */
    padding: 0;
    /* 移除内边距 */
    font-size: 14px;
    font-weight: normal;
    /* 正常字体粗细 */
    cursor: pointer;
    text-decoration: none;
    /* 移除下划线 */
    transition: color 0.3s ease;
    /* 颜色过渡效果 */
    margin-left: 13px;
}

.lrcs {
    display: flex;
    align-items: center;

}

/* 添加伪类来模仿下载链接的hover效果 */
.btn-login:hover,
.btn-register:hover {
    color: #00b38a;
    /* 悬停时变为绿色 */
    text-decoration: underline;
    /* 悬停时添加下划线 */
}

/* User Info Styling */
.user-info {
    display: flex;
    align-items: center;
}

.user-info .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Circular avatar */
    object-fit: cover;

}

.user-info span {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

/* 搜索 */
.search-header {
    background-color: #fff;
    padding: 20px 0;
}

.search-wrapper {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}

.text-a {
    font-size: 32px;
    font-weight: 700;
    color: #00b38a;
    margin: 0 auto;
    letter-spacing: 1px;
}

.search-input {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid #00b38a;
    border-radius: 24px;
    font-size: 16px;
    outline: none;
}

.search-button {
    padding: 12px 30px;
    background-color: #00b38a;
    color: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-size: 16px;
}

/* 顶部导航 */
.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.nav-link {
    padding: 6px 16px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #00b38a;
}

/* 面包屑导航 */
.breadcrumb-container {
    max-width: 1000px;
    margin: 0 auto;
}

.breadcrumb-container nav .text-emerald-500 {
    transition: color 0.3s ease;
}

.breadcrumb-container nav .text-emerald-500:hover {
    color: #00b38a;
}

/* 底部 */
.bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background-color: #f5f5f5;
}

.bottom-links a {
    color: #666;
    text-decoration: none;
    padding: 4px 8px;
}

.bottom-links a:hover {
    color: #00b38a;
}

/* 疾病信息 */


.disease-content-container {
    background: #fff;
    padding: 20px;
    margin: 20px auto;
    max-width: 1500px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.disease-header {
    margin-bottom: 10px;
}

.disease-department,
.disease-note {
    font-size: 14px;
    color: #666;
}

.disease-details {
    font-size: 16px;
    line-height: 1.6;
    text-indent: 2em;
    
        /* 标题大小减小，这里假设标题是h1标签 */
    p {
        font-size: 25px;
    };
    h2 {
        font-size: 16px;
    };
}

.doctors-container {
    background: #fff;
    padding: 20px;
    margin: 20px auto;
    max-width: 1500px;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .doctors-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .doctors-container {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* 推荐和查看更多标题布局 */
.doctors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.doctors-header h2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #111827;
    margin: 0;
}

.doctors-header .find {
    font-size: 0.875rem;
    color: #00b38a;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.doctors-header .find:hover {
    color: #007a60;
}

/* 医生卡片布局 */
.doctors-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .doctors-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .doctors-list {
        grid-template-columns: repeat(4, 1fr);
    }
}



.doctor-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(11, 243, 239, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s;
    cursor: pointer;
}

.doctor-card:hover {
    box-shadow: 0 8px 12px rgba(5, 121, 92, 0.783);
}

.doctor-image img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 1rem auto;
    display: block;
    border: 4px solid #f0f0f0;
}

.doctor-info {
    padding: 1rem;
    text-align: center;
    
}

.doctor-name-title {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: baseline;
}

.doctor-name {
    font-size: 1.125rem;
    font-weight: bold;
    color: #111827;
}

.doctor-title {
    font-size: 0.875rem;
    color: #6b7280;
    margin-left: 10px;
}

.doctor-details {
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

.rating-consult {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #9ca3af;
}

.doctor-rating {
    display: flex;
    align-items: center;
    color: #fbbf24;
}

.star-icon {
    font-size: 1rem;
    color: #fbbf24;
    margin-left: 0.25rem;
}

.separator {
    margin: 0 0.5rem;
}

.rating {
    font-size: 1rem;
    font-weight: 600;
}

.consult-count {
    font-size: 0.875rem;
    color: #9ca3af;
}

.introduction {
    color: #4b5563;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.price-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.price {
    color: #10b981;
    font-weight: 600;
}

.consult-btn {
    padding: 0.5rem 1rem;
    background-color: #10b981;
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    border: none;
}

.consult-btn:hover {
    background-color: #059669;
}

/* 医院 */
.hospitals-container {
    background: #fff;
    padding: 20px;
    margin: 20px auto;
    max-width: 1500px;
    border-radius: 8px;
    box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.2);
}

.hospitals-header {
    align-items: center;
    margin-bottom: 1rem;
}

.depart{
    font-size: large;
    font-weight: bold;

}
.hospitals-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 每行两列 */
    gap: 20px;
    /* 卡片之间的间距 */
}

.hospital-card {
    display: flex;
    /* 设置卡片为 Flex 布局 */
    align-items: flex-start;
    gap: 16px;
    /* 图片和文字之间的间距 */
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.hospital-card:hover {
    transform: translateY(-5px);
    /* 鼠标悬停时上移 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 鼠标悬停时增强阴影 */
}

.hospital-image img {
    width: 120px;
    /* 图片宽度 */
    height: 120px;
    /* 图片高度 */
    border-radius: 8px;
    /* 圆角 */
    object-fit: cover;
    /* 保持图片比例 */
}

.hospital-info {
    display: flex;
    flex-direction: column;
    /* 垂直排列信息 */
    justify-content: center;
    /* 垂直居中对齐 */
    gap: 8px;
    /* 每行文字之间的间距 */
    flex: 1;
    /* 占用剩余空间 */
}

.hospital-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
}

.hospital-address {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.hospital-level {
    background-color: #ffcc00;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    margin-right: auto;
}
</style>